<html>
  <head>
    <!-- global information -->
    <script type="text/javascript">
      var server = {key : "%(key)s",
                    url : "%(url)s",
                    host : "%(host)s",
                    port : "%(port)s"};
    </script>
    <!-- simulator -->
    <link type="text/css" href="r/simulator.css" rel="stylesheet"/>
    <script type="text/javascript" src="r/jquery.min.js"></script>
    <script type="text/javascript" src="r/jquery.periodic.js"></script>
    <script type="text/javascript" src="r/simulator.js"></script>
    <!-- user definable elements -->
    <link type="text/css" href="r/model.css" rel="stylesheet"/>
    <script type="text/javascript" src="r/model.js"></script>
    <link type="text/css" href="r/trace.css" rel="stylesheet"/>
    <script type="text/javascript" src="r/trace.js"></script>
    <link type="text/css" href="r/about.css" rel="stylesheet"/>
    <script type="text/javascript" src="r/about.js"></script>
  </head>
  <body>
    <!-- control bar -->
    <div id="alive">
      <!-- buttons -->
      <ul class="ui">
        <li><a id="ui-reset" href="#">Reset simulation</a></li>
        <li><a id="ui-quit" href="#">Stop server</a></li>
        <li><a id="ui-help" href="#">Help</a></li>
        <li><a id="ui-about" href="#">About</a></li>
      </ul>
      <!-- server pings -->
      <span class="ping">Starting...</span>
    </div>
    <!-- model to be simulated -->
    <div id="model">%(model)s</div>
    <!-- exploration trace -->
    <div id="trace"></div>
    <!-- information about the simulator -->
    <div id="about">%(about)s</div>
  </body>
</html>
